<template>
	<view class="page">
		<u-navbar title="编辑工地" border @leftClick="$utils.back()" placeholder>
		</u-navbar>
		<view style="flex: 1;overflow: hidden;" v-if="!loading">
			<scroll-view scroll-y="true" style="height: 100%;">
				<u-form labelPosition="top" labelWidth='100%' :model="form" ref="uForm">
					<u-form-item label="封面:" prop="images" borderBottom>
						<imageUpload :imageUrl='form.images' @changeImageList='changeImageList' />
					</u-form-item>
					<u-form-item label="状态:" prop="is_finished" borderBottom>
						<u-radio-group v-model="form.is_finished">
							<u-radio :customStyle="{marginRight: '8px'}" v-for="(item, index) in statusList"
								:key="index" :label="item.name" :name="item.id">
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="推荐:" prop="is_recommend" borderBottom>
						<u-switch v-model="form.is_recommend" :inactiveValue='0' :activeValue='1'></u-switch>
					</u-form-item>
					<u-form-item label="显示:" prop="is_show" borderBottom>
						<u-switch v-model="form.is_show" :inactiveValue='0' :activeValue='1'></u-switch>
					</u-form-item>
					<u-form-item label="备注:" prop="remark_name" borderBottom>
						<u--input v-model="form.remark_name" placeholder="请输入备注" />
					</u-form-item>
					<u-form-item label="描述:" prop="description" borderBottom>
						<u--textarea v-model="form.description" placeholder="请输入描述"></u--textarea>
					</u-form-item>
					<u-form-item label="地址:" prop="address" borderBottom>
						<u--textarea v-model="form.address" placeholder="请输入地址"></u--textarea>
					</u-form-item>
					<u-form-item label="小区:" prop="district" borderBottom>
						<u--input v-model="form.district" placeholder="请输入小区"></u--input>
					</u-form-item>
					<u-form-item label="全景图地址:" prop="vr_image_url" borderBottom>
						<u-input v-model="form.vr_image_url" placeholder="请输入全景图地址">
							<template slot="suffix">
								<view @click='paster'>
									粘贴地址
								</view>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item label="水电效果图:" prop="vr_electricity_url" borderBottom>
						<u-input v-model="form.vr_electricity_url" placeholder="请输入水电效果图">
							<template slot="suffix">
								<view @click='paster'>
									粘贴地址
								</view>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item label="开工日期:" prop="start_at" borderBottom>
						<view class="inputBox" @click='calendarShow=true'>
							{{form.start_at?form.start_at:'请选择开工日期'}}
						</view>
					</u-form-item>
					<u-form-item label="面积:" prop="area" borderBottom>
						<u-number-box v-model="form.area" :min="1"></u-number-box>
					</u-form-item>
					<u-form-item label="风格:" prop="style_id" borderBottom>
						<view class="inputBox" @click='styleShow=true'>
							{{styleName?styleName:'请选择风格'}}
						</view>
					</u-form-item>
					<u-form-item label="审核人:" prop="manage_id" borderBottom>
						<view class="inputBox" @click='manageShow=true'>
							{{manageName?manageName:'请选择审核人'}}
						</view>
					</u-form-item>
					<u-form-item label="户型:" prop="layout" borderBottom>
						<u-input v-model="form.layout" placeholder="请输入户型">
						</u-input>
					</u-form-item>
					<u-form-item label="服务团队:" prop="member_ids" borderBottom>
						<view class="inputBox" @click='memberShow=true'>
							<template v-if="!member.length">请选择服务团队</template>
							<view v-for="(item,index) in member" :key="index" style="margin:10rpx 10rpx 0 0;">
								<u-tag :text="item.nick_name" plain size="mini"></u-tag>
							</view>
						</view>
					</u-form-item>
				</u-form>
			</scroll-view>
		</view>
		<view v-else style="flex: 1;overflow: hidden;">
			<view class="Skeleton" style="height: 30rpx;margin-top: 20rpx;" :key="item" v-for="item in 40"></view>
		</view>
		<u-button v-if="!loading" :disabled='disabled' text="更改信息" color=" #3975c6" @click='userSubmit'></u-button>

		<root-portal><u-calendar :minDate='minDate()' :show="calendarShow" @close='calendarShow=false'
				@confirm='calendarConfirm' />
			<u-picker keyName="title" :show="styleShow" :columns="styleList" @confirm='confirm'
				@cancel='styleShow=false'></u-picker>

			<template v-if="manageShow">
				<selectAuthorizer :show='manageShow' @close='manageShow=false' @selectAuthorizer='selectAuthorizer' />
			</template>
			<template v-if="memberShow" >
				<selectAuthorizer  :member='member' type='check' :show='memberShow' @close='memberShow=false'
					@selectMember='selectMember' />
			</template>
		</root-portal>
	</view>
</template>

<script>
	import imageUpload from './components/imageUpload.vue'
	import selectAuthorizer from '@/components_company/selectAuthorizer.vue'
	export default {
		components: {
			imageUpload,
			selectAuthorizer
		},
		data() {
			return {
				calendarShow: false,
				statusList: [{
						name: '未完工',
						id: 0
					},
					{
						name: '完工',
						id: 1
					},
				],
				loading: true,
				disabled: false,
				thumb: [],
				form: {
					start_at: null,
					vr_electricity_url: null,
					member_ids: [],
					images: [],
					thumb_small: '',
					thumb: '',
					remark_name: '',
					description: '',
					address: '',
					vr_image_url: '',
					style_id: '',
					district: '',
					manage_id: null,
					is_finished: null,
					is_recommend: 0,
					is_show: 0,
					area: 1,
					layout: null
				},
				styleName: null,
				rules: {
					'start_at': {
						type: 'any',
						required: true,
						message: '请选择开工日期',
						trigger: ['blur', 'change']
					},
					'member_ids': {
						type: 'array',
						required: true,
						message: '请选择服务团队',
						trigger: ['blur', 'change']
					},
					'layout': {
						type: 'any',
						required: true,
						message: '请选择户型',
						trigger: ['blur', 'change']
					},
					'images': {
						type: 'array',
						required: true,
						message: '请选择封面',
						trigger: ['blur', 'change']
					},
					'remark_name': {
						type: 'string',
						required: true,
						message: '请填写备注',
						trigger: ['blur', 'change']
					},
					'description': {
						type: 'string',
						required: true,
						message: '请填写描述',
						trigger: ['blur', 'change']
					},
					'address': {
						type: 'string',
						required: true,
						message: '请填写地址',
						trigger: ['blur', 'change']
					},
					'style_id': {
						type: 'number',
						required: true,
						message: '请选择风格',
						trigger: ['blur', 'change']
					},
					'district': {
						type: 'string',
						required: true,
						message: '请输入小区',
						trigger: ['blur', 'change']
					},
					'manage_id': {
						type: 'any',
						required: true,
						message: '请选择服务团队',
						trigger: ['blur', 'change']
					},
					'status': {
						type: 'any',
						required: true,
						message: '请选择状态',
						trigger: ['blur', 'change']
					},
				},
				userShow: false,
				id: null,
				user_id: null,
				styleList: [],
				styleShow: false,
				manageName: null,
				manageShow: false,
				memberShow: false,
				member: []
			}
		},
		onLoad(op) {
			this.id = op.id
			this.$api_company.Decorate.Info(op.id).then(res => {
				const data = res.data.decorate
				if (data.style_id) {
					this.form = {
						start_at: data.start_at,
						vr_electricity_url: data.vr_electricity_url,
						member_ids: data.members.map(item => item.id),
						thumb_small: data.thumb_small,
						remark_name: data.remark_name,
						description: data.description,
						address: data.address,
						vr_image_url: data.vr_image_url,
						style_id: data.style_id,
						thumb: data.thumb,
						district: data.district,
						manage_id: data.manage_id,
						is_finished: data.is_finished,
						is_recommend: data.is_recommend,
						is_show: data.is_show,
						layout: data.layout,
						area: data.area,
						images: data.images.map(item => {
							return {
								upload: true,
								id: item.id,
								url: item.url,
								coverUrl: item.url,
								thumb_small: item.url_small
							}
						})
					}
					this.member = data.members.map(item => {
						return {
							...item,
							user_id: item.id
						}
					})
					this.styleName = data.style?.title
					this.manageName = data.manager.nick_name
				}
				this.form = {
					...this.form,
					is_finished: data.is_finished,
					is_recommend: data.is_recommend,
					is_show: data.is_show
				}
				this.user_id = data.customer_id

				this.loading = false
				setTimeout(() => {
					this.$refs.uForm.setRules(this.rules)
				}, 1000)
			})
			this.$api_company.Style.List().then(res => {
				this.styleList = [
					res.data.styles.data
				]
			}).catch(err => {
				uni.$u.toast(err.message)
			})
		},
		methods: {
			minDate() {
				// 获取当前时间
				var currentDate = new Date();

				// 获取一个月前的时间
				currentDate.setMonth(currentDate.getMonth() - 1);

				// 获取年、月、日
				var year = currentDate.getFullYear();
				var month = currentDate.getMonth() + 1; // 月份从0开始，需要加1
				var day = currentDate.getDate();

				// 格式化输出
				var formattedDate = year + "-" + month + "-" + day;
				return formattedDate
			},
			calendarConfirm(e) {
				this.form.start_at = e[0]
				this.calendarShow = false
			},
			changeImageList(e) {
				console.log(e)
				this.form.images = e
			},
			selectMember(e) {
				this.member = e.map(item => {
					return {
						...item,
						...item.user
					}
				})
				this.form.member_ids = this.member.map(item => item.user_id)
				this.memberShow = false
			},

			confirm(e) {
				const data = e.value[0]
				this.styleName = e.value[0].title
				this.form.style_id = e.value[0].id
				this.styleShow = false
			},
			userSubmit() {

				this.$refs.uForm.validate().then(res => {
					this.disabled = true
					const obj = {
						...this.form,
						thumb: this.form.images[0].url,
						thumb_small: this.form.images[0].thumb_small,
						image_ids: this.form.images.map(item => item.id)
					}
					this.$api_company.Decorate.Update(this.id, {
						...obj,
						customer_id: this.user_id
					}).then(res => {
						uni.$u.toast('更改成功')
						uni.reLaunch({
							url: '/customer_company/index'
						})
					}).catch(err => {
						this.disabled = false
					})
				}).catch(errors => {
					uni.$u.toast('请输入完整信息')
				})
			},
			paster() {
				uni.getClipboardData({
					success: (res) => {
						this.form.vr_image_url = res.data
					}
				});
			},
			selectAuthorizer(e) {
				this.form.manage_id = e.user_id
				this.manageName = e.members.nick_name
				this.manageShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0rpx 20rpx;
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
</style>